<template>
    <div style="font-size:16px">
        <div
            style="padding:20px;display: flex;background-color: #4dc5c5;margin: 10px;border-radius: 5px;align-items: center;">
            <van-icon color="#fff" name="user-circle-o" size="70" />
            <div style="margin-left:10px;color: aliceblue;text-align: left;">
                <div style="line-height:20px;">{{ '昵称：' + info.nickName }}</div>
                <div style="line-height:20px;">{{ ('用户名：' + info.loginName) }}</div>
                <div>{{ ('个性签名：' + info.introduceSign) }}</div>
            </div>
        </div>
        <div style="border:1px solid #ccc;margin: 10px;height: 300px;">
            <van-grid :gutter="10">
                <van-grid-item icon="photo-o" text="文字" />
                <van-grid-item icon="photo-o" text="文字" />
                <van-grid-item icon="photo-o" text="文字" />
                <van-grid-item icon="photo-o" text="文字" />
            </van-grid>
            <div style="padding:10px;display: flex;align-items: center;">
                <van-icon name="smile-o" size="30" />
                <router-link to='/order' style="margin-left:10px;color: #000;">我的订单</router-link>
            </div>
            <div style="padding:10px;display: flex;align-items: center;">
                <van-icon name="label-o" size="30" />
                <router-link to='/addressList' style="margin-left:10px;color: #000">我的地址</router-link>
            </div>
            <div style="padding:10px;display: flex;align-items: center;">
                <van-icon name="setting-o" size="30" />
                <router-link to='/Login' style="margin-left:10px;color: #000">退出登录</router-link>
            </div>
        </div>
    </div>

</template>


<script>
import { getUserInfo } from "../../api";
export default {
    data() {
        return {
            info: {},
        };
    },
    created() {
        this.getData();
    },
    methods: {
        async getData() {
            let data = await getUserInfo();
            console.log(data);
            this.info = data.data;
        },
    },
};
</script>

<style scoped>

</style>